<template>
  <div>
    <div id="echarts-project"></div>
    <div class="content-right">
      <div class="content1">
        <div class="text">
          最新动态最新动态最新动态最新动态最新动态最新动态最新动态
        </div>
      </div>
      <div class="content2">
        <div class="text">
          开工时间:2018年9月27日
        </div>
      </div>
      <div class="content3">
        <div class="text">
          完工时间:2019年5月27日
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'project-details',
  data: function () {
    return {
      option1:
        {
          title: {
            text: '{a|离竣工还有} {b|345} {a|天}',
            x: 'center',
            y: '80%',
            textStyle: {
              rich: {
                a: {
                  color: '#141418',
                  fontSize: 16,
                  fontFamily: '苹方'
                },
                b: {
                  color: '#2e73ff',
                  fontSize: 20,
                  fontFamily: 'Din'
                }
              }
            },
            subtextStyle: {
              color: '#666666',
              fontStyle: 'normal',
              fontWeight: 'normal',
              fontSize: 18
            }
          },
          series: [
            {
              type: 'gauge',
              name: '倒计时',
              radius: '85%',
              startAngle: '215',
              endAngle: '-35',
              splitNumber: '16',
              pointer: {
                show: true,
                width: 3,
                length: 30
              },
              detail: {
                color: '#2e73ff',
                fontSize: 20,
                formatter: '{value}%',
                offsetCenter: [0, '-40%']
              },
              title: {
                show: true,
                color: '#141418',
                offsetCenter: [0, '100%']
              },
              data: [{
                value: 30,
                name: ''
              }],
              axisLine: {
                show: true,
                lineStyle: {
                  color: [[0, '#2e73ff'], [1, '#2e73ff']],
                  width: 30,
                  shadowBlur: 15,
                  shadowColor: '#2e73ff',
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  opacity: 0
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: true,
                length: 18,
                lineStyle: {
                  color: '#2e73ff',
                  width: 7,
                  type: 'solid'
                }
              },
              axisLabel: {
                show: false
              }
            }
          ]
        }
    }
  },
  mounted () {
    this.draw()
  },
  methods: {
    draw () {
      this.chart_1 = this.$echarts.init(document.getElementById('echarts-project'))
      this.chart_1.setOption(this.option1)
      window.onresize = this.chart_1.resize
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  #echarts-project{
    width: 3.8rem;
    height: 3.6rem;
    float: left;
  }
  .content-right{
    float: left;
    font-size: 0.24rem;
    width: 5.3rem;
    height: 4rem;
    margin-top: 0.10666666666666667rem;
    .content1{
      width: 4.4rem;
      height: 0.8533333333333334rem;
      background: #fff4e8;
      color: #97979f;
      border-radius: 0.13333333333333333rem;
      font-family:'苹方';
      margin-bottom: 0.4rem;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      display:flex;
      justify-content:center;
      align-items:center;
      .text{
        width: 3.8rem;
      }
    }
    .content2{
      width: 4.4rem;
      height: 0.8533333333333334rem;
      background: #e0edff;
      color: #2e73ff;
      border-radius: 0.13333333333333333rem;
      font-family:'方正兰亭黑简体';
      margin-bottom: 0.4rem;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      display:flex;
      justify-content:center;
      align-items:center;
      .text{
        width: 3.8rem;
      }
    }
    .content3 {
      width: 4.4rem;
      height: 0.8533333333333334rem;
      background: #fff4e8;
      color: #f68708;
      border-radius: 0.13333333333333333rem;
      font-family:'方正兰亭黑简体';
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      display:flex;
      justify-content:center;
      align-items:center;
      .text{
        width: 3.8rem;
      }
    }
  }

</style>
